<template>
  <el-select v-if="auth === 'edit'"
             clearable v-model="model" :placeholder="placeholder">
    <el-option
      v-for="item in flowStatusOption" :key="item.key"
      :value="item.key" :label="item.title"/>
  </el-select>

  <el-select v-else-if="auth === 'hide'" :placeholder="placeholder" disabled>
  </el-select>
</template>
<script setup>
import {computed, reactive, ref, unref} from 'vue';
import {isNotEmpty} from '@/utils/CommonUtils';

const props = defineProps({
  field: {
    type: Object,
    default: () => ({}),
  },
  auth: {
    type: String,
    default: 'static'
  },
});
const model = ref();
const flowStatusOption = reactive([
  {
    key: '0',
    title: '未发起'
  },
  {
    key: '1',
    title: '运行中'
  },
  {
    key: '2',
    title: '流程通过'
  },
  {
    key: '3',
    title: '流程不通过'
  }
]);
const emits = defineEmits(['fieldValueChange']);

function getFieldValue() {
  return unref(model);
}

function setFieldValue(value) {
  model.value = value;
}

function getFieldValueText() {
  let item = flowStatusOption.find(opt => opt.key === model.value);
  if (isNotEmpty(item)) return item.title;
}

function resetField() {
  model.value = undefined;
}

const placeholder = computed(() => {
  if (isNotEmpty(props.field) && isNotEmpty(props.field.showName)) return `请选择${props.field.showName}`;
});

defineExpose({
  resetField,
  getFieldValue,
  setFieldValue,
  getFieldValueText
});
</script>
